<template>
  <!-- 中间多个数量 -->
  <div class="centerOne">
    <ul>
      <li>
        <span>销售总额</span>
        <b>{{allNums.salePrice}}</b>
      </li>
      <li>
        <span>销售总量</span>
        <b>{{allNums.saleNum}}</b>
      </li>
      <li>
        <span>原料总额</span>
        <b>{{allNums.rawPrice}}</b>
      </li>
      <li>
        <span>采购总额</span>
        <b>{{allNums.purchasePrice}}</b>
      </li>
      <li>
        <span>生产总量</span>
        <b>{{allNums.produceNum}}</b>
      </li>
      <li>
        <span>出库总量</span>
        <b>{{allNums.outNum}}</b>
      </li>
      <li>
        <span>在制总量</span>
        <b>{{allNums.balanceNum}}</b>
      </li>
      <li>
        <span>库存量</span>
        <b>{{allNums.wmsNum}}</b>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    allNums: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
/* 中间第一个 */
.centerOne {
  height: 33.333%;
  padding: 0 50px;
  ul {
    overflow: hidden;
    height: 100%;
    li {
      width: 25%;
      float: left;
      color: #fff;
      height: 45%;
      padding: 5px 10px;
      span {
        height: 35px;
        line-height: 35px;
        width: 100%;
        display: block;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
      }
      b {
        display: block;
        width: 100%;
        height: calc(100% - 35px);
        background: url(../../../../assets/images/kb01/kuan.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
}
</style>
